<!--
 * @Description: 全部商品页面组件(包括全部商品,商品分类,商品搜索)
 * @Author: hai-27
 * @Date: 2020-02-07 16:23:00
 * @LastEditors: hai-27
 * @LastEditTime: 2020-03-08 12:11:13
 -->
<template>
	<div class="goods" id="goods" name="goods">
		<!-- 面包屑 -->
		<div class="breadcrumb">
			<el-breadcrumb separator-class="el-icon-arrow-right">
				<el-breadcrumb-item to="/">首页</el-breadcrumb-item>
				<el-breadcrumb-item>全部商品</el-breadcrumb-item>
				<el-breadcrumb-item v-if="search">搜索</el-breadcrumb-item>
				<el-breadcrumb-item v-else>分类</el-breadcrumb-item>
				<el-breadcrumb-item v-if="search">{{ search }}</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<!-- 面包屑END -->
		
		<template>
			<div>
				<div class="container">
					<!-- 轮播图banner -->
					<div class="banner" @mouseover="stopAutoPlay" @mouseout="startAutoPlay">
						<a href="#" v-for="(item, index) in banner_size" :key="index">
							<router-link
								:to="{ path: '/goods/details', query: {productID:newProduct[banner_index-1].productId} }">
								<img :src="newProduct[banner_index-1].image" class="banner-img">
							</router-link>
						</a>
					</div>
					
					<!-- 上一张、下一张按钮 -->
					<div class="button prev" @click="prevBanner">
						<img src="https://s1.ax1x.com/2023/04/20/p9klzNV.png" class="icon-stle">
					</div>
					<div class="button next" @click="nextBanner">
						<img src="https://s1.ax1x.com/2023/04/20/p9klxA0.png" class="icon-stle">
					</div>
					
					<!-- 指示器 -->
					<div class="dots">
                		<span
							v-for="(item, index) in banner_size"
							:key="index"
							:class="item==banner_index?'dot-active':''" @click="showSubMenu(item)">
							
						</span>
					</div>
					
					<!-- 分类菜单 -->
					<div class="menu-content">
						<ul>
							<li class="menu-item"
								v-for="(item, index) in menu_list"
								:key="index"
								v-on:mouseover="showSubMenu(item,$event)"
							v-on:mouseout="hideSubMenu($event)">
								<!--							一级分类-->
								<a href="javascript:void(0)">
									<span>{{ item.name }}</span>
									<img src="https://s1.ax1x.com/2023/04/20/p9klxA0.png" class="icon-stle">
								</a>
								<!-- 二级菜单 -->
								<div class="sub-menu hide">
									<ul class="inner-box">
										<div class="sub-inner-box">
											<div class="title">{{category1Name}}</div>
											<div class="sub-row" v-for="(category2, ind) in category2List" :key="ind">
												<span class="bold">{{ category2.name }} :</span>
												<a href="javascript:void(0)" class="menu" v-for="(item2, ind2) in category2.children" :key="ind2" @click="activeName(item2.id)">
													<span class="text">{{ item2.name }}</span>
												</a>
											</div>
										</div>
									</ul>
								</div>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</template>
		
		<!-- 主要内容区 -->
		<div class="main">
			<div class="list">
				<MyList :list="product" v-if="product.length>0"></MyList>
				<div v-else class="none-product">抱歉没有找到相关的商品，请看看其他的商品</div>
			</div>
			<!-- 分页 -->
			<div class="pagination">
				<el-pagination
					background
					layout="prev, pager, next"
					:page-size="pageSize"
					:total="total"
					@current-change="currentChange"
				></el-pagination>
			</div>
			<!-- 分页END -->
		</div>
		<!-- 主要内容区END -->
	</div>
</template>
<script>
	export default {
		data() {
			return {
				categoryList: "", //分类列表
				category2List: "",  //二级分类列表
				categoryID: [], // 分类id
				category1Name:"",//父分类名称
				product: "", // 商品列表
				productList: "",
				total: 0, // 商品总量
				pageSize: 15, // 每页显示的商品数量
				currentPage: 1, //当前页码
				activeName: "-1", // 分类列表当前选中的id
				search: "", // 搜索条件
				menuDataTest: "",
				menuTimer: null, // 定时器
				activeSubmenu: null, // 当前要展示的菜单
				active: false,
				category3List: "",
				newProduct: "", // 新品轮播图数据
				timer: null, //定时器，用于banner轮播
				banner_index: 1, //当前banner下标
				banner_size: 4, //banner数量(获取轮播图列表时动态赋值到此)
				// 分类菜单数据（json格式，我提前整理好的）
				menu_list: []
			}
		},
		created() {
			// 获取分类列表
			this.getCategory();
			this.getCategory13();
			this.startAutoPlay();
			this.getCategoryTree();
			// 获取新品轮播图数据
			this.$axios
				.get("/product/new-product/selectAll", {})
				.then(res => {
					this.newProduct = res.data.data;
					this.banner_size = this.newProduct.length;
				})
				.catch(err => {
					return Promise.reject(err);
				});
		},
		activated() {
			this.activeName = "-1"; // 初始化分类列表当前选中的id为-1
			this.total = 0; // 初始化商品总量为0
			this.currentPage = 1; //初始化当前页码为1
			// 如果路由没有传递参数，默认为显示全部商品
			if (Object.keys(this.$route.query).length == 0) {
				this.categoryID = [];
				this.activeName = "0";
				return;
			}
			// 如果路由传递了categoryID，则显示对应的分类商品
			if (this.$route.query.categoryID != undefined) {
				this.categoryID = this.$route.query.categoryID;
				if (this.categoryID.length == 1) {
					this.activeName = "" + this.categoryID[0];
				}
				return;
			}
			// 如果路由传递了search，则为搜索，显示对应的分类商品
			if (this.$route.query.search != undefined) {
				this.search = this.$route.query.search;
			}
		},
		watch: {
			// 监听点击了哪个分类标签，通过修改分类id，响应相应的商品
			activeName: function (val) {
				if (val == 0) {
					this.categoryID = [];
				}
				if (val > 0) {
					this.categoryID = [Number(val)];
				}
				// 初始化商品总量和当前页码
				this.total = 0;
				this.currentPage = 1;
				// 更新地址栏链接，方便刷新页面可以回到原来的页面
				this.$router.push({
					path: "/goods",
					query: {category3Id: this.categoryID}
				});
			},
			// 监听搜索条件，响应相应的商品
			search: function (val) {
				if (val != "") {
					this.getProductBySearch(val);
				}
			},
			// 监听分类id，响应相应的商品
			categoryID: function () {
				this.getData();
				this.search = "";
			},
			// 监听路由变化，更新路由传递了搜索条件
			$route: function (val) {
				if (val.path == "/goods") {
					if (val.query.search != undefined) {
						this.activeName = "-1";
						this.currentPage = 1;
						this.total = 0;
						this.search = val.query.search;
					}
				}
			}
		},
		methods: {
			// 返回顶部
			backtop() {
				const timer = setInterval(function () {
					const top = document.documentElement.scrollTop || document.body.scrollTop;
					const speed = Math.floor(-top / 5);
					document.documentElement.scrollTop = document.body.scrollTop =
						top + speed;
					
					if (top === 0) {
						clearInterval(timer);
					}
				}, 20);
			},
			// 页码变化调用currentChange方法
			currentChange(currentPage) {
				this.currentPage = currentPage;
				if (this.search != "") {
					this.getProductBySearch();
				} else {
					this.getData();
				}
				this.backtop();
			},
			getCategory13() {
				this.$axios
					.get("/product/category/selectAllCategory13", {})
					.then(res => {
						if (res.data.code === 0) {
							this.menuDataTest = res.data.data;
						}
					})
					.catch(err => {
						return Promise.reject(err);
					});
			},
			// 向后端请求分类列表数据
			getCategory() {
				this.$axios
					.get("/product/category/selectAllCategory3", {})
					.then(res => {
						const val = {
							id: 0,
							name: "全部"
						};
						const cate = res.data.data;
						cate.unshift(val);
						this.categoryList = cate;
					})
					.catch(err => {
						return Promise.reject(err);
					});
			},
			getCategoryTree(){
				this.$axios
					.get("/product/category/selectCategoryTree", {})
					.then(res => {
						this.menu_list=res.data.data;
					})
					.catch(err => {
						return Promise.reject(err);
					});
			},
			// 向后端请求全部商品或分类商品数据
			getData() {
				// 如果分类列表为空则请求全部商品数据，否则请求分类商品数据
				const api = '/product/list'
				this.$axios
					.get(api, {
						params: {
							category3Id: this.categoryID[0],
							page: this.currentPage,
							limit: this.pageSize
						}
					})
					.then(res => {
						this.product = res.data.data.records;
						this.total = res.data.data.total;
					})
					.catch(err => {
						return Promise.reject(err);
					});
			},
			// 通过搜索条件向后端请求商品数据
			getProductBySearch() {
				this.$axios
					.post("/product/getProductBySearch", {
						search: this.search,
						currentPage: this.currentPage,
						pageSize: this.pageSize
					})
					.then(res => {
						this.product = res.data.Product;
						this.total = res.data.total;
					})
					.catch(err => {
						return Promise.reject(err);
					});
			},
			
			// banner播放停止
			stopAutoPlay() {
				if (this.timer) {
					clearInterval(this.timer);
				}
			},
			// banner播放开始
			startAutoPlay() {
				let _t = this;
				// 3秒切换
				_t.timer = setInterval(function () {
					_t.banner_index++;
					if (_t.banner_index > _t.banner_size) {
						_t.banner_index = 1;
					}
				}, 3000);
			},
			// 上一张
			prevBanner() {
				this.stopAutoPlay();
				this.banner_index--;
				if (this.banner_index <= 0) {
					this.banner_index = this.banner_size;
				}
				this.startAutoPlay();
			},
			// 下一张
			nextBanner() {
				this.stopAutoPlay();
				this.banner_index++;
				if (this.banner_index > this.banner_size) {
					this.banner_index = 1;
				}
				this.startAutoPlay();
			},
			// 切换banner显示（点击指示器）
			changeBanner(index) {
				this.stopAutoPlay();
				this.banner_index = index;
				this.startAutoPlay();
			},
			// 显示对应的二级分类菜单
			showSubMenu(item,$event) {
				this.category2List=item.children;
				this.category1Name=item.name;
				document.querySelector('.sub-menu').classList.remove('hide');
			},
			// 隐藏二级分类菜单
			hideSubMenu($event) {
				document.querySelector('.sub-menu').classList.add('hide');
			},
		},
		computed: {
			//次级分类分列【分两列】
			/*menuListMatch(){
				const matchData=[];
				if(this.category3List && this.category3List.length){
					let n=this.category3List.length/2;
					matchData.push(this.category3List.slice(0,n));
					matchData.push(this.category3List.slice(n+1,this.category3List.length-1));
				}
				return matchData;
			}*/
			
			menuListMatch() {
				const matchData = [];
				if (this.category3List && this.category3List.length) {
					for (let i = 0; i < this.category3List.length; i += 6) {
						matchData.push(this.category3List.slice(i, i + 6));
					}
				}
				return matchData;
			}
		}
	};
</script>

<style scoped>
	.el-button + .el-button {
		margin-left: 8px;
	}
	
	.goods {
		background-color: #f5f5f5;
	}
	
	/* 面包屑CSS */
	.el-tabs--card .el-tabs__header {
		border-bottom: none;
	}
	
	.goods .breadcrumb {
		height: 50px;
		background-color: white;
	}
	
	.goods .breadcrumb .el-breadcrumb {
		width: 1225px;
		line-height: 30px;
		font-size: 16px;
		margin: 0 auto;
	}
	
	/* 面包屑CSS END */
	.category-item-active .title {
		background: #ff6700;
		color: #fff
	}
	
	.category-item-active .title em[class*=iconfont] {
		color: #fff;
		color: hsla(0, 0%, 100%, .5)
	}
	
	.category-item-active .children {
		display: block
	}
	
	a {
		text-decoration: none;
	}
	
	a:link, a:visited {
		color: #5e5e5e;
	}
	
	.container {
		width: 100%;
		max-width: 1200px;
		height: 460px;
		position: relative;
		overflow: hidden;
		background: #e4e4e4;
	}
	
	.banner {
		width: 100%;
		height: 100%;
		position: relative;
		overflow: hidden;
	}
	
	/* 上一张、下一张按钮 */
	.button {
		width: 40px;
		height: 70px;
		position: absolute;
		top: 50%;
		left: 244px;
		margin-top: -40px;
		background-color: rgba(0, 0, 0, 0.2);
		display: flex;
		justify-content: center;
		align-items: center;
		cursor: pointer;
	}
	
	.button.next {
		left: auto;
		right: 0;
	}
	.category-item-active .title {
		background: #ff6700;
		color: #fff
	}
	
	.button .fa {
		font-size: 50px;
		color: #fff;
	}
	
	.button:hover {
		background-color: rgba(0, 0, 0, 0.4);
	}
	
	/* 指示器 */
	.dots {
		position: absolute;
		right: 0;
		bottom: 24px;
		padding-right: 24px;
	}
	
	.dots span {
		display: inline-block;
		width: 12px;
		height: 12px;
		border-radius: 50%;
		background-color: rgba(7, 17, 27, 0.4);
		margin-left: 8px;
		cursor: pointer;
		box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.8);
	}
	
	/* 激活态 */
	.dots span.dot-active {
		background-color: #fff;
		box-shadow: inset 0 0 0 2px rgba(7, 17, 27, 0.4);
	}
	
	/* 左侧分类菜单 */
	.menu-content {
		width: 244px;
		height: 454px;
		background-color: rgba(0, 0, 0, .5);
		position: absolute;
		top: 0;
		left: 0;
		padding-top: 6px;
	}
	
	.menu-item {
		height: 64px;
		line-height: 66px;
		padding: 0 24px;
		cursor: pointer;
	}
	
	.menu-item:hover {
		background: rgba(0, 0, 0, .2);
		/* .2 就是过渡的时间 */
		transition: all .2s linear;
	}
	
	.menu-item a {
		display: flex;
		justify-content: center;
		align-items: center;
		color: #fff;
		padding: 0 8px;
		border-bottom: 1px solid rgba(255, 255, 255, 0.2);
		height: 64px;
		font-size: 16px;
	}
	
	.menu-item:last-child a {
		border-bottom: none;
	}
	
	.menu-item a span {
		flex: 1;
	}
	
	.menu-item a .fa {
		color: rgba(255, 255, 255, 0.6);
		font-size: 18px;
	}
	
	/* 二级分类菜单 */
	.sub-menu {
		border: 1px solid #d9dde1;
		background-color: #fff;
		width: calc(80vw - 244px);
		max-width: 730px;
		height: 458px;
		position: absolute;
		left: 244px;
		top: 0;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	}
	
	.hide {
		display: none;
	}
	
	.inner-box {
		width: 100%;
		height: 100%;
		overflow: auto;
	}
	
	.sub-inner-box {
		width: 100%;
		margin-left: 40px;
		width: calc(100% - 40px);
	}
	
	.sub-inner-box .title {
		color: #00CA78;
		font-size: 16px;
		line-height: 16px;
		font-weight: bold;
		margin-top: 28px;
		margin-bottom: 30px;
	}
	
	.sub-inner-box .sub-row {
		margin-bottom: 25px;
		line-height: 25px;
	}
	
	.sub-inner-box .sub-row .bold {
		font-weight: 700;
		margin-right: 15px;
	}
	
	.sub-inner-box .sub-row .menu {
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		font-weight: 700;
		margin-right: 15px;
	}
	.sub-inner-box .sub-row .text {
		color: #000000;
		font-weight: bold;
		
	}
	
	.sub-inner-box .sub-row a {
		margin-right: 15px;
	}
	
	.icon-stle {
		width: 17px;
		height: 17px;
	}
	
	.banner-img {
		width: 100%;
		height: 100%;
	}
	
	
	/* 分类标签CSS */
	
	.nav .product-nav .title {
		width: 50px;
		font-size: 16px;
		font-weight: 700;
		float: left;
	}
	
	
	.site-category-list .category-item-active .title {
		background: #ff6700;
		color: #fff
	}
	
	
	.site-category-list .title {
		position: relative;
		display: block;
		padding-left: 30px;
		height: 42px;
		line-height: 42px;
		color: #424242
	}
	
	.site-category-list.site-category-list-custom .title {
		color: #fff
	}
	
	.site-category-list.site-category-list-custom .title i {
		color: hsla(0, 0%, 100%, .5)
	}
	
	.site-category-list .children-list li {
		position: relative;
		float: left;
		width: 265px;
		height: 76px
	}
	
	
	/* 分类标签CSS END */
	.home-hero-swiper .swiper-slide a {
		display: block;
		background: url(//i1.mifile.cn/f/i/2014/cn/placeholder-220.png) no-repeat 620px
	}
	
	.home-hero-swiper .swiper-slide img {
		display: block;
		width: 1226px;
		height: 460px
	}
	
	
	.container {
		width: 1226px;
		margin-right: auto;
		margin-left: auto
	}
	
	.container:after, .container:before {
		content: " ";
		display: table
	}
	
	.container:after {
		clear: both
	}
	
	
	/* 主要内容区CSS */
	.goods .main {
		margin: 0 auto;
		max-width: 1225px;
	}
	
	.goods .main .list {
		min-height: 650px;
		padding-top: 14.5px;
		margin-left: -13.7px;
		overflow: auto;
	}
	
	.goods .main .pagination {
		height: 50px;
		text-align: center;
	}
	
	.goods .main .none-product {
		color: #333;
		margin-left: 13.7px;
	}
	
	/* 主要内容区CSS END */
</style>
